<template>
  <div>
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">考试</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">考试详情</a></el-breadcrumb-item>
      </el-breadcrumb>

      <div class="grid">
        <div class="basic-info">
          <div class="title"><i class="el-icon-s-order"></i>&nbsp;{{ exam.name }}</div>
          <div class="text">状态：{{ exam.status }}</div>
          <div class="text">开始时间：{{ exam.startTime }}</div>
          <div class="text">结束时间：{{ exam.endTime }}</div>
        </div>
      </div>

      <div class="instructions">
        <div class="title">考 试 须 知</div>
        <div class="content">
          <div class="title1">一、考前准备</div>
          <div class="text1">1.考试设备：准备电脑一台，须安装谷歌浏览器，支持本考试系统，确保考试平台能够正常登录并答题。</div>
          <div class="text1">2.监控设备：准备手机一只、手机支架一个，手机须安装钉钉并支持钉钉视频会议，确保考生的考试全过程能够正常拍摄。</div>
          <div class="text1">3.监控界面：在考生侧面（偏后）固定手机位置，要求手机监控画面包含考生脸部、双手、书桌桌面、电脑键盘及电脑屏幕。</div>
          <div class="text1">4.有效身份证件：身份证、学生证或校园卡。</div>
          <div class="text1">5.网络：确保网络畅通。</div>
          <div class="text1">6.软件环境：关闭一切与考试无关的软件，尤其是弹窗软件，避免因弹窗次数过多系统自动交卷。</div>
          <div class="text1">7.考前学习：考试系统使用指南-学生考试手册和“本科课程线上考试考生总体要求”。</div>
          <div class="text1">8.考前测试：按照任课教师的安排，考前参加测试，熟悉操作流程。</div>
          <div class="text1">9.如课程考试涉及主观题部分需采用 A4 纸手写答题提前准备空白 A4 答题纸。</div>
          <div class="title1">二、考试纪律</div>
          <div class="text1">1.要求诚信考试、独立完成。</div>
          <div class="text1">2.禁止在考试时间范围内偏离摄像头监控、就相关内容与任何人交流、禁止左顾右盼、禁止手持手机或其他设备、禁止佩戴耳机，否则视为作弊。</div>
          <div class="title1">三、考试过程</div>
          <div class="text1">1.至少提前 20 分钟进入平台与钉钉考试群视频监控会议，准备好有效身份证件（身份证、学生证或校园卡），无证件不得参加考试。</div>
          <div class="text1">2.考试前，按照监考人员指令，面向摄像头、手持有效身份证件，直到监考人员验证完毕。</div>
          <div class="text1">3.开考前 5 分钟未进入钉钉考试群视频监控会议的考生视为迟到，迟到考生一律不得参加考试。</div>
          <div class="text1">4.开考前，按照监考人员指令，在平台签署 “本科课程线上考试考生诚信承诺书”和“本科课程线上考试考生总体要求”。</div>
          <div class="text1">5.开考后，考试界面窗口不允许最小化，如设置成最小化，会弹出 10 秒倒计时对话框，考生点击“知道了”即可恢复全屏，否则 10 秒后或教师设置的视窗控制次数已到，系统将自动交卷。</div>
          <div class="text1">6.考生在交卷之前，禁止提前退出钉钉考试群视频监控会议。</div>
          <div class="title1">四、其他</div>
          <div class="text1">1. 分阶段考试形式：如考试分为两个阶段的线上考试，考生须在平台上根据两个阶段试题的开放时间完成考试。</div>
          <div class="text1">2.主观题拍照上传考试方式：如课程考试涉及主观题部分需采用 A4 纸手写答题、拍照上传的方式，该部分考试流程如下。</div>
          <div class="text1">（1）开考前，请考生按照任课教师考前提醒，提前准备好空白 A4 答题纸，在每页 A4 答题纸正上方书写姓名、学号、学院、答题纸页码（如 2-1、2-2）等。</div>
          <div class="text1">（2）考试结束时，请考生按照监考人员指令，使用正在进行钉钉视频监控的手机对答题纸进行全方位扫视，实时记录答题纸全貌。</div>
          <div class="text1">（3）按照监考人员指令，使用手机拍照功能拍照上传。</div>
          <div class="text1">3.严格遵守“线上考试考生总体要求”。</div>
          <div class="text1">4.违规处理：因考生违反以上规定所造成的后果由考生自行承担。</div>
        </div>
      </div>

      <el-button type="primary" v-if="exam.status=='未开始' || exam.status=='已结束'" disabled>现在不能参加考试</el-button>
      <el-button type="primary" v-if="countdown<=0" @click="goToPaper">开始考试</el-button>
      <el-button id="countdownBtn" type="primary" v-if="exam.status=='进行中' && countdown>0" disabled>({{countdown}}) 请认真阅读考试须知</el-button>
    </div>
  </div>
</template>

<script>
// import { findSubjectById } from '../../../api/questionBank.js'
import { getExamById } from '../../../api/students.js'
export default {
  name: 'ExamInfo',
  data () {
    return {
      countdown: 5,
      examid: 0,
      exam: {},
      subject: {}
    }
  },
  mounted () {
    this.examid = this.$route.query.id
    this.getPaperById()
    this.countdownTime()
  },
  methods: {
    getPaperById () {
      getExamById(this.examid).then(res => {
        this.exam = res.data.data
        // eslint-disable-next-line
        if (this.exam.status == '未开始') {
          this.$message({
            message: '考试还未开始！',
            type: 'warning'
          })
          // eslint-disable-next-line
        } else if (this.exam.status == '已结束') {
          this.$message({
            message: '考试已经结束！',
            type: 'warning'
          })
        }
      })
    },
    // 跳转试卷详情
    goToPaper () {
      this.$router.push({path: '/student/paper', query: {examId: this.examid}})
    },
    // 倒计时
    countdownTime () {
      // eslint-disable-next-line
      let that = this
      var time = 5
      var tim = setInterval(function () {
        time--
        console.log('time: ' + time)
        document.getElementById('countdownBtn').innerHTML = '(' + time + ')' + ' 请认真阅读考试须知'
        if (time <= 0) {
          that.countdown = -1
          clearInterval(tim)
          document.getElementById('countdownBtn').innerHTML = '开始考试'
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
  .breadcrumb {
    padding: 20px;
  }

  .grid{
    margin: 20px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: row dense;
  }

  .title {
    margin-top: 15px;
    margin-left: 20px;
    font-size: 20px;
    font-weight: bolder;
  }

  .text {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    font-size: 15px;
  }

  .basic-info {
    height: auto;
    grid-column-start: 1;
    grid-column-end: 2;
    text-align: left;
    border: 1px solid #e5e4e9;
  }

  .instructions {
    border: 1px solid rgba(61, 63, 65, 0.5);
    width: 90%;
    margin: 30px auto;
    overflow-y: scroll;
    height: 60vh;
  }
  .instructions .title1 {
    font-weight: bold;
    text-align: left;
    height: 25px;
  }
  .instructions .content {
    margin: 10px 20px;
  }
  .instructions .text1 {
    text-align: left;
    text-indent: 2em;
    line-height: 25px;
  }
</style>
